import React, { useState, useEffect } from "react";
import { Col, Row, Button, Space, Table, Tag, message, Modal } from "antd";
import { getArtDataList, deleteArtData } from "@/api/artCate/index";
import { ExclamationCircleFilled } from "@ant-design/icons";
import ModalCom from "./components/index";
const { confirm } = Modal;

// import
const { Column, ColumnGroup } = Table;
const ColStyle = {
  display: "flex",
  justifyContent: "flex-end",
  alignItems: "center",
};

// 获取列表

const ArtCate: React.FC = () => {
  interface DataType {
    key: React.Key;
    title: string;
    align: string;
    dataIndex: string;
    width: string;
    render?: (text: string) => React.ReactNode;
    action?: React.ReactNode;
  }

  const [data, setData] = useState<DataType[]>([]);
  const [loading, setLoading] = useState<Boolean>(false);
  const columns = [
    {
      title: "序号",
      align: "center",
      dataIndex: "index",
      key: "index",
      width: "100px",
      render: (text, record, index) => index + 1,
    },
    {
      title: "分类名称",
      dataIndex: "name",
      key: "name",
      align: "center",
    },
    {
      title: "别名",
      dataIndex: "alias",
      key: "alias",
      align: "center",
    },
    {
      title: "操作",
      key: "action",
      width: "200px",
      align: "center",
      render: (text, record) => (
        <Space size="middle">
          <Button type="primary" onClick={() => onClickEdit(record.id)} size="small">
            编辑
          </Button>
          <Button danger onClick={() => onClickDelete(record.id)} size="small">
            删除
          </Button>
        </Space>
      ),
    },
  ];
  const getList = async () => {
    try {
      const res = await getArtDataList();
      if (res.code === 200) {
        console.log(res.data);
        res.data.forEach((item: any) => {
          item.key = item.id;
        });
        setData(res.data);
        setTimeout(() => {
          setLoading(false);
        }, 1000);
      }
    } catch (error) {}
  };
  // getList();
  useEffect(() => {
    setLoading(true);
    getList();
  }, []);
  const [modal, setModal] = useState(false);
  const [title, setTitle] = useState("");
  const [id, setId] = useState(null);
  const modalClose = () => {
    setModal(false);
  };
  const onClickAdd = () => {
    setModal(true);
    setId(null);
    setTitle("新增分类");
  };
  const onClickEdit = (id) => {
    setModal(true);
    setId(id);
    setTitle("编辑分类");
  };
  // 删除
  const deleteData = async (id) => {
    try {
      const res = await deleteArtData({ id });
      if (res.code === 200) {
        message.success(res.msg);
        getList();
      }
    } catch (error) {}
  };
  const onClickDelete = async (id) => {
    console.log("删除", id);
    confirm({
      title: "删除",
      icon: <ExclamationCircleFilled />,
      content: "确认删除吗？",
      onOk() {
        setLoading(true);
        deleteData(id);
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  };

  const SonObj = {
    modal,
    modalClose,
    title,
    getList,
    id,
  };
  return (
    <>
      <Row>
        <Col span={8} offset={8}></Col>
        <Col span={8} style={ColStyle}>
          <Button onClick={onClickAdd} type="primary">
            新增
          </Button>
        </Col>
      </Row>
      <Row style={{ marginTop: "20px" }}>
        <Col span={24}>
          <Table dataSource={data} columns={columns} loading={loading} bordered></Table>
        </Col>
      </Row>
      <ModalCom SonObj={SonObj} />
    </>
  );
};

export default ArtCate;
